<template>
  <div>
    <ListNav @Search="search"/>
    <div class="container">
      <div class="card" v-bind:key="blog.BlogId" v-for="blog in blogs">
        <div class="card-header">
          <h4 class="card-title">
            <router-link :to="{name:'detail',query:{id:blog.BlogId}}">{{blog.Title}}</router-link>
          </h4>
        </div>
        <div class="card-body">
          <p class="card-text cont">{{blog.Introduction}}</p>
          <span>{{blog.UpdateTime}}</span>
        </div>
        <div class="card-footer">
          <router-link :to="{name:'detail',query:{id:blog.BlogId}}" class="btn btn-primary">阅读详情</router-link>
        </div>
      </div>
    </div>
    <MoPaging
      @change="pageChange"
      v-bind:totalPage="pagination.totalPage"
      v-bind:currentPage="pagination.currentPage"
      ref="moPaging"
    />
  </div>
</template>

<script>
import axios from "axios";
import ListNav from "../components/List_Nav";
import MoPaging from "../components/MoPaging";

export default {
  name: "Blogs",
  components: {
    ListNav,
    MoPaging
  },
  data() {
    return {
      blogs: [],
      pagination: Object,
      //总记录数
      count: 0
    };
  },
  watch: {
    $route(to, from) {
      if (to.path) {
        axios
          .get(
            "/api/Blog?type=" +
              this.$route.query.type +
              "&Fields=BlogId,Introduction,Content,Title,UpdateTime"
          )
          .then(res => {
            this.blogs = res.data;
            this.pagination = JSON.parse(res.headers.pagination);
            this.$refs.moPaging.setIndex(1);//调用子组件方法 重置当前页 设置为1
          })
          .catch(err => window.console.log(err));
      }
    }
  },
  methods: {
    //获取数据
    getList() {
      axios
        .get(
          "/api/Blog?type=" +
            this.$route.query.type +
            "&PageNumber=" +
            this.pagination.currentPage +
            "&Fields=BlogId,Introduction,Content,Title,UpdateTime"
        )
        .then(res => {
          this.blogs = res.data
        })
        .catch(err => window.console.log(err));
    },
    //从page组件传递过来的当前page
    pageChange(currentPage) {
      // window.console.log(currentPage);
      this.pagination.currentPage = currentPage;
      this.getList();
    },
    search(q){
      axios
      .get(
        "/api/Blog?type=" +
          this.$route.query.type +
          "&Fields=BlogId,Content,Introduction,Title,UpdateTime"+"&Search="+q
      )
      .then(res => {
        this.blogs = res.data;
        this.pagination = JSON.parse(res.headers.pagination);
        // window.console.log(JSON.parse(res.headers.pagination));
      })
      .catch(err => window.console.log(err));
    }
  },
  created() {
    axios
      .get(
        "/api/Blog?type=" +
          this.$route.query.type +
          "&Fields=BlogId,Content,Introduction,Title,UpdateTime"
      )
      .then(res => {
        this.blogs = res.data;
        this.pagination = JSON.parse(res.headers.pagination);
        // window.console.log(JSON.parse(res.headers.pagination));
      })
      .catch(err => window.console.log(err));
  }
};
</script>

<style scoped>
.card {
  margin: 20px 0;
}
.cont {
  font-size: 110%;
}
span {
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  font-size: 80%;
  width: 100%;
}
</style>